<template>
  <div class="lockScrren-container">
    <el-carousel indicator-position="outside" height="100vh" :interval="5000" :autoplay="true">
      <el-carousel-item v-for="item in images" :key="item">
        <img :src="item" style="width:100%;height:100%">
      </el-carousel-item>
    </el-carousel>
    <div ref="lockScrrenContent" class="lockScrren-content">
      <div class="logo">
        <img src="@/assets/images/logo.png">
      </div>
      <div class="time">
        <FlipClock />
        <span style="font-size: 14px; margin-left: 7px; display: flex; flex-direction: column;justify-content: end;">{{ T.getTimeState() }}</span>
      </div>
      <div class="date">{{ date }}</div>
      <div class="userInfo">
        <img :src="common.getFileView(userInfo.avatar)" data-default="avatar" @error="handleImageError">
        <div class="realName">{{ userInfo.realName }}</div>
      </div>
      <el-form :inline="true" :model="lockForm" class="lock-form">
        <el-form-item>
          <el-input v-model="lockForm.password" show-password	type="password" placeholder="请输入密码">
            <template slot="append">
              <el-button type="primary" @click="handleUnlock"><i class="el-icon-right" /></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item />
      </el-form>
      <div style="width: 100%;text-align:center">
        <el-link type="primary" :underline="false" class="forget-pwd-link" @click="handleGoForgetPwd">忘记密码？</el-link>
      </div>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      date: '-',
      images: [require('@/assets/images/banner1.png'), require('@/assets/images/banner3.png'), require('@/assets/images/banner2.png')],
      lockForm: {},
      fullscreen: false
    }
  },
  created() {
    this.getDate()
    setInterval(() => {
      this.getDate()
    }, 1000)
  },
  methods: {
    handleUnlock() {
      if (!this.lockForm.password) {
        this.$modal.msgWarning('请输入解锁密码！')
        return
      }
      this.$store.dispatch('unlock', this.lockForm.password).then((res) => {
        Cookies.set('lockScreen', false)
        this.$modal.msgSuccess(this.T.getTimeState() + '好，欢迎回来！')
        setTimeout(() => {
          this.$router.push({ path: this.redirect || '/' })
        }, 2000)
      }).then((_) => {})
    },
    handleGoForgetPwd() {
      this.$router.push({ path: '/password' })
    },
    getDate() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      if (month < 10) {
        month = '0' + month
      }
      this.date = year + '/' + month + '/' + day + ' ' + this.T.getWeek()
    }
  }
}
</script>
<style lang="scss" scoped>
.lockScrren-container{
  height: 100%;
  .lockScrren-content{
    color: #fff;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100vh;
    min-height: var(--min-height);
    z-index: 111;
    .logo{
      img{
        margin-top: 50px;
        margin-left: 50px;
        width: 60px;
      }
    }
    .subLogo{
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 66px;
      img{
        width: 220px;
      }
    }
    .time{
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 22px;
    }
    .date{
      text-align: center;
      font-size: 20px;
      font-weight: 400;
    }
    .userInfo{
      text-align: center;
      margin-top: 90px;
      display: flex;
      align-items: center;
      flex-direction: column;
      img{
        width: 96px;
        height: 96px;
        border-radius: 48px;
        border: 3px solid #fff;
      }
      .realName{
        font-size: 15px;
        margin-top: 20px;
      }
    }
    .lock-form{
      text-align: center;
      margin-top: 35px;
      .el-input{
        input{
          width: 220px;
        }
      }
    }
    .forget-pwd-link{
      color: #fff;
    }
  }

}
</style>
